<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="carousal figure.css"></head>
    <script type="text/javascript">
    window.onload =function (){   
        var container = document.getElementById('container');
        var picture = document.getElementById('picture');
        var buttons = document.getElementById('buttons').getElementsByTagName('span');
        var index = 1;
        var len = 5;
        var animated = false;
        var interval=3000;
        var timer;

        function showbuttons(){
            for(i=0 ; i<buttons.length ;i++){
                if( buttons[i].className=='on'){
                    buttons[i].className='';
                    break;
                }
            }
            buttons[index-1].className='on';
        }                                     //使只有当前图片对应的按钮亮起来而其他按钮不亮  

        function animate(offset){
                if (offset == 0) {
                    return;
                }
                animated=true;
                var newleft = parseInt(picture.style.left) + offset;  
                var time = 300;              //切换一张图片需要的总时间
                var inteval = 8;                     //切换一张图片过程中每次的时间间隔
                var speed = offset/(time/inteval);              //切换一张图片过程中每次的位移量                
                var go=function(){
                    if ((speed > 0 && parseInt(picture.style.left) < newleft)|| (speed < 0 && parseInt(picture.style.left) > newleft)){ // speed大于0向右移，小于0向左移  
                    picture.style.left = parseInt(picture.style.left) + speed + 'px';
                        setTimeout(go,inteval); //10ms后若仍符合if条件重新调用go函数
                    }
                    else {
                        picture.style.left = newleft + 'px';
                        if (newleft>-520) {
                        picture.style.left=-2600+'px';
                        };
                        if (newleft<-2600) {
                        picture.style.left=-520+'px';
                        };
                        animated=false;                      
                    }
                }
                go();
        };
        function play(){
            timer =setInterval(function(){
                next.onclick();
                play();
            },interval)
        }
        function stop(){
            clearInterval(timer);
        }
        next.onclick = function () {
                
                if (index == 5) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-520);
                showbuttons();
            }
            prev.onclick = function () {
                
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(520);
                showbuttons();
            }
        for (var i = 0; i< buttons.length ;  i++) {
                buttons[i].onclick=function(){
                    if (animated) {
                        return;
                    }
                    if(this.className == 'on') {
                        return;
                    }
                    var myindex =parseInt(this.getAttribute('index'));
                    var offset= -520 * (myindex - index);
                    animate(offset); //传给animate函数
                    index=myindex; // 更新数据
                    showbuttons(); 
                }

        };
        container.onmouseout=play;
        container.onmouseover=stop; 
        play();
}  
</script>
<body>
    <div class="container" id="container">
        <div class="picture" style="left:-520px;" id="picture">
            <a href=""></a>
            <img src="picture/5.jpg" alt="pic5">
            <a href=""></a>
            <img src="picture/1.png" alt="pic1">
            <a href=""></a>
            <img src="picture/2.jpg" alt="pic2">
            <a href=""></a>
            <img src="picture/3.jpg" alt="pic3">
            <a href=""></a>
            <img src="picture/4.jpg" alt="pic4">
            <a href=""></a>
            <img src="picture/5.jpg" alt="pic5">
            <a href=""></a>
            <img src="picture/1.png" alt="pic1"></div>
        <div class ="buttons" id="buttons">
            <span index="1" class="on" ></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
</body>
</html>